<template>
  <div v-loading="pageLoading">
    <header class="game_modal_header">参赛数据</header>
    <div class="schedule_content modal_shadow">
      <!-- <el-row class="subtotal gl_pb_15">
        <el-col :span="4" align="right" :offset="16">
          <span>参赛人次：</span>
          <span>123123123</span>
        </el-col>
        <el-col :span="4" align="right">
          <span>参赛人数：</span>
          <span>123123123</span>
        </el-col>
      </el-row> -->
      <el-table v-loading="tableLoading" :data="tableData" stripe size="small" style="width: 100%">
        <el-table-column label="序号" type="index" :width="80" align="center" />
        <el-table-column label="机构名称" align="left">
          <template slot-scope="scope">
            <div class="agency_wrap gl_clear">
              <div class="agency_photo gl_mr_10">
                <img :src="getStaticFileUrl(scope.row.imagePath)" alt="" srcset="" @error="onAthleteFaceError">
              </div>
              <span>{{ scope.row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="delegationTypeDes" label="机构类型" align="center" />
        <el-table-column prop="personCount" label="参赛人数" align="center" />
        <el-table-column prop="entryCount" label="参赛人次" align="center" />
      </el-table>

      <!-- 分页 -->
      <div align="center" class="gl_py_10">
        <el-pagination
          :current-page="qo.Page"
          :page-size="qo.maxResultCount"
          :total="total"
          layout="total,sizes,prev,pager,next,jumper"
          :page-sizes="[10, 20, 30, 40]"
          @size-change="sizeChange"
          @current-change="pageIndexChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {
  Api_GET_EventsManagementCompetitionEntryDataCompDelegationDataForWebQO
} from '@/lib/form/game/swaggerForm';

import {
  api_GET_EventsManagementCompetitionEntryDataCompDelegationDataForWeb
} from '@/extend/api/gameswaggerApi/app';

import defaultFace from '@/assets/images/face_default.png';

export default {
  props: {
    gameId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      pageLoading: false,
      tableLoading: false,
      qo: new Api_GET_EventsManagementCompetitionEntryDataCompDelegationDataForWebQO(),
      tableData: [],
      total: 0,
      defaultFace: defaultFace
    };
  },
  watch: {
    gameId: {
      immediate: true,
      handler(val) {
        if (val) {
          this.qo.CompetitionId = val;
          this.getPageList();
        }
      }
    }
  },
  created() {
    if (this.gameId) {
      this.qo.CompetitionId = this.gameId;
      this.getPageList();
    }
  },
  methods: {
    // 获取页面数据
    getPageList (page) {
      this.tableLoading = true;
      this.qo.Page = page || 1;
      this.qo.SkipCount = (this.qo.Page - 1) * this.qo.MaxResultCount;
      api_GET_EventsManagementCompetitionEntryDataCompDelegationDataForWeb(this.qo)
        .then(
          res => {
            this.tableLoading = false;
            this.tableData = res.items;
            this.total = res.totalCount;
            console.log(res);
          }
        )
        .catch(
          error => {
            this.tableLoading = false;
            this.$message({
              message: `参赛数据获取失败！ ${error.error.message}`,
              type: 'error',
              showClose: true
            });
          }
        );
    },
    // 图片回显
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    onAthleteFaceError () {
      const img = event.srcElement;
      img.src = this.defaultFace;
      img.onerror = null;
    },
    // 分页处理
    sizeChange(MaxResultCount) {
      this.qo.MaxResultCount = MaxResultCount;
      this.getPageList();
    },
    pageIndexChange(currentPage) {
      this.getPageList(currentPage);
    }
  }
};
</script>

<style lang="scss" scoped>
  .modal_shadow {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.10);
  }
  .game_modal_header {
    position: relative;
    box-sizing: border-box;
    height: 40px;
    padding-left: 20px;
    margin-bottom: 14px;
    line-height: 40px;
    color: #353434;
    font-weight: bold;
    font-size: 20px;
  }
  .game_modal_header::after {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 8px;
    height: 40px;
    background-color: #E02020;
    border-radius: 4px;
    content: "";
  }
  .schedule_content {
    padding: 20px;
  }

  .subtotal {
    font-size: 14px;
  }

  .agency_wrap span,
  .agency_wrap .agency_photo {
    vertical-align: middle;
  }
  .agency_photo {
    display: inline-block;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
    }
  }
</style>
